<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>定位信息</title>
</head>
<body>
<div class="report-con">
    <div class="title" id = "order_location">下单位置：</div>
    <div class="title">定位下单数量</div>
    <div class="table">
        <table id="order_distance_info">
            <tr>
                <th>距离(米)</th>
                <th>下单数量(除本用户外)</th>
            </tr>
        </table>
    </div>

</div>
<script src="/jquery-3.5.1.min.js"></script>
<script src="/url.js"></script>
<script type="text/javascript">
    let url = requestUrl + "/erupt-api/order/getLocationInfo";
    let urlSearchParams = new URLSearchParams(window.location.search);
    let tokenJson = localStorage.getItem('_token');
    let jsonObj = JSON.parse(tokenJson);
    $.ajax({
        type: "POST",
        url: url,
        headers: {
            token: jsonObj.token
        },
        data: {orderId: urlSearchParams.get('orderId')},
        datatype: "json",
        success: function (result) {
            console.log(result)
            if (result.code === 1) {
                let disInfo = result.data.disInfo;
                if (disInfo && disInfo.length > 0) {
                    let order_distance_info = '<tr>\n' +
                        '                <th>距离(米)</th>\n' +
                        '                <th>下单数量(除本用户外)</th>\n' +
                        '            </tr>'

                    for (let i = 0; i < disInfo.length; i++) {
                        let item = disInfo[i]
                        order_distance_info += '<tr data-row-key="360407293" className="ant-table-row ant-table-row-level-0" >' +
                            '<td class="ant-table-cell">' + item.distance + '</td>' +
                            '<td class="ant-table-cell">' + item.number + '</td>';
                    }
                    inputById(order_distance_info, 'order_distance_info')
                }
                inputById('当前下单位置：'+result.data.locationAddress, 'order_location')
            } else {
                alert(result.msg)
            }
        }
    });

    function inputById(data, idName) {
        if (document.getElementById(idName)) {
            document.getElementById(idName).innerHTML = data
        }
    }
</script>
</body>
<style type="text/css">
    i {
        font-style: normal;
    }

    .report-con {
        background: #fff;
        color: #000;
        padding: 20px;
    }

    .title {
        font-size: 20px;
        margin: 28px 0 20px;
    }


    .user-info .row .item span {
        font-weight: bold;
    }

    .advice-title span {
        color: red;
        font-weight: bold;
    }

    .advice-title.level1 span {
        color: #42E61A;
    }

    .advice-title.level2 span {
        color: #22DDDD;
    }

    .advice-title.level3 span {
        color: #338FCC;
    }

    .advice-title.level4 span {
        color: #E6941A;
    }

    .advice-title.level5 span {
        color: #E61A42;
    }

    .advice-list .item span {
        position: absolute;
        left: 0;
        color: #000;
        top: 100%;
    }

    .advice-list .item i {
        position: absolute;
        right: 0;
        color: #000;
        top: 100%;
    }

    .table {
        margin-bottom: 20px;
    }

    .table table {
        width: 100%;
        table-layout: fixed;
        font-size: 12px;
        line-height: 36px;
        border-left: 1px solid #D9DAE2;
        border-top: 1px solid #D9DAE2;
        border-collapse: collapse;
    }

    .table table tr th {
        border-right: 1px solid #D9DAE2;
        border-bottom: 1px solid #D9DAE2;
        background: #ECEDF0;
    }

    .table table tr td {
        border-right: 1px solid #D9DAE2;
        border-bottom: 1px solid #D9DAE2;
        text-align: center;
        padding: 0;
    }
</style>
</html>
